<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login page</title>

    <script src="static/jquery-3.1.1.min.js"></script>
</head>
<body>

    <h2>This is Login page</h2>

    <label > 
        <input type="text" name="username" id="username">
    </label>
    <br>

    <label > <input type="password" name="password" id="password"></label>
    <br>
    <label>
        <input type="checkbox" name="remember-me" id="remember-me" value="true">记住密码
    </label>
    <br>

    <button id="btn" onclick="dothing()">click me</button>


    <script>
        function dothing(){
            // 获取输入框中用户名的内容
            var username = $('#username').val();
            // 获取密码
            var psssword = $('#password').val();
            
            // 获取当前chekbox 是否被选中，如果被选中返回true ，如果没有被选中 返回false
            var rememberMe = $('#remember-me').is(":checked");

            // 通过发送ajax 请求来实现登录
                $.ajax({
                    type:"POST",
                    url:"/login",
                    data:{
                        'username':username,
                        'password':password,
                        'remember-me':rememberMe
                    },
                    success: function(R){
                        if(R.isOk){
                            location.href = '/index.html';
                        }
                        else{
                            alert("login failed");
                        }
                    },
                    error:function(e){
                        console.log(e.message);
                    }
                });

            // 
        }

    </script>
    
</body>
</html>